<template>
  <div>
    <a-row :gutter="16">
      <!-- <a-col
        class="gutter-row"
        :span="12"
      >
        <a-row :gutter="16">
          <a-col :span="12">
            <a-card>
              <a-statistic
                title="在线人数"
                :value="11.28"
                :precision="2"
                suffix="%"
                :value-style="{ color: '#3f8600' }"
                style="margin-right: 50px"
              >
                <template #prefix>
                  <arrow-up-outlined />
                </template>
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card>
              <a-statistic
                title="消耗积分"
                :value="9.3"
                :precision="2"
                suffix="%"
                class="demo-class"
                :value-style="{ color: '#cf1322' }"
              >
                <template #prefix>
                  <arrow-down-outlined />
                </template>
              </a-statistic>
            </a-card>
          </a-col>
        </a-row>
      </a-col> -->
      <a-col
        class="gutter-row"
        :span="24"
      >
        <a-card title="通知公告">
          <div class="header-tool">
            <a-button
              type="primary"
              @click="handleEdit()"
            >
              新增
            </a-button>
            <a-button
              class="mr10"
              type="primary"
              @click="reLoad()"
            >
              刷新
            </a-button>
          </div>

          <a-table
            :row-key="(record) => record.notice_id"
            :columns="newColumns"
            :dataSource="tableData"
            :pagination="
              isObject(pagination)
                ? {
                    showQuickJumper: true,
                    total: pagination.total,
                    current: pagination.current,
                    pageSize: pagination.pageSize,
                    showTotal: (total) => `共计 ${pagination.total} 条`
                  }
                : false
            "
            @change="handleTableChange"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'image'">
                <img
                  style="width: 50px; height: 50px"
                  :src="record.image"
                />
              </template>
              <template v-if="column.dataIndex === 'is_on'">
                <a-switch
                  @change="changeDel($event, record)"
                  checked-children="是"
                  un-checked-children="否"
                  v-model:checked="record.is_on"
                />
              </template>

              <template v-if="column.dataIndex === 'action'">
                <span>
                  <a @click="handleEdit(record)">编辑</a>
                  <a-divider type="vertical" />
                  <a-popconfirm
                    class="gap-popconfirm"
                    title="确定删除吗？"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="handleDelete(record)"
                  >
                    <a>删除</a>
                  </a-popconfirm>
                </span>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>

    <noticeForm
      ref="newsFormEle"
      :showAddDialog="showAddDialog"
      @success="handleActivityAdded"
      @close="showAddDialog = false"
    />
  </div>
</template>

<script setup>
  import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue'
  import { isObject } from 'lodash-es'
  import { message } from 'ant-design-vue'
  import axios from 'axios'
  import { ref, onMounted, reactive, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElButton, ElTable, ElTableColumn, ElDialog } from 'element-plus'
  import noticeForm from './noticeForm.vue'
  import { noticelist, noticedelete, noticePublish } from '@/api/index'

  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0
  })
  const tableData = ref([])
  const newColumns = [
    // {
    //   title: 'id',
    //   dataIndex: 'notice_id',
    //   width:'50px'
    // },

    {
      title: '公告内容',
      dataIndex: 'content',
      ellipsis: true
    },

    {
      title: '发布',
      dataIndex: 'is_on',
        width:'80px'
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
       width:'120px'
      
    },
    {
      title: '操作',
      dataIndex: 'action',
        width:'200px'
    }
  ]

  const mapRows = ref([])

  const newsFormEle = ref()
  const showAddDialog = ref(false)
  const init = async () => {
    // let authorization =
    //   'WECHATPAY2-SHA256-RSA2048 mchid="1683029327",nonce_str="6C0A0BB128A9ADA5489F662C82CB22F9",signature="FpgZQnMqHebgA7rVUh5u1jyuSKkZexVg7LBHMNDv6PXNQyBVgzF7HJlrDLYv25HGeze64psbwkkJyI35j6ZytBscJSfhr2jFGnfjKIBlQwcKg5mCJ1vfnGevZ55gKY4/6qgiRIqKpWROX5SCCIKpaXdUntaPN80BnW9Hcp1WOiBWjfkR3aYSsCxrsYabMqaKHwkKqgXDlWYyWKHtLgqBstSPJlIoZd26dXjCW9yvZ3J8UAH8Wlgw5eVIjH8O29mmZGvBzLqWlVPc1xaWEHqHd2qd52n/JqzzWhyEe/TsmvA2Pd0pBPNp522gVsHYwazYpDirXOo85UyZki85J57txg==",timestamp="1723564881537",serial_no="371096946ECBA77C00AB030AF63622A166AD9D53"'
    // let enroll_number = '17235584824074400'
    // let url = '' //`https://api.mch.weixin.qq.com/v3/pay/transactions/out-trade-no/${enroll_number}`;
    // const res = await axios.get(url, {
    //   params: { mchid: '1683029327' },
    //   headers: {
    //     Authorization: authorization,
    //     Accept: 'application/json'
    //   }
    // })
  }
  init()
  const getList = () => {
    noticelist({
      page: pagination.current,
      pageSize: pagination.pageSize
    })
      .then((res) => {
        tableData.value = res.data
        pagination.total = res.total
      })
      .catch((err) => {
        console.log(err)
      })
  }
  const reLoad = () => {
    pagination.current = 1
    getList()
  }
  getList()
  const handleTableChange = ({ current, pageSize }) => {
    pagination.current = current
    pagination.pageSize = pageSize
    getList()
  }
  // 编辑
  const handleEdit = (row) => {
    showAddDialog.value = true
    newsFormEle.value.init(row)
  }
  const changeDel = (e, row) => {
    noticePublish({ notice_id: row.notice_id, is_on: e })
      .then(() => {
        getList()
      })
      .catch((error) => {
        row.is_on = !e
      })
  }
  const handleDelete = (row) => {
    noticedelete({ notice_id: row.notice_id })
      .then(() => {
        getList()
      })
      .catch((error) => {})
  }

  const handleActivityAdded = () => {
    getList()
    showAddDialog.value = false
  }
</script>

<style scoped>
  .header-tool {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .header-tool button {
    margin-right: 5px;
  }
</style>
